Ajax是什麼

JavaScript透過瀏覽器發送資訊給伺服器，在不重新整理整個網頁的情況下，和資料庫、後端或伺服器要求資料之後，伺服器回傳結果，再經由JavaScript來判斷處理，整理出需要的資料。

透過XMLHttpRequst()要求資料

可以透過readyState查看狀況：

readyState為0

var xhr = XMLHttpRequst();

當執行了XMLHttpRequst()，readyState就會顯示為0。

代表已產生XMLHttpRequst，但尚未連結要撈取的資料。

readyState為1

xhr.open('格式', '讀取網址', 同步與否);

格式可以分為兩種，一種是get，代表讀取資料；另一種是post，代表傳送資料到伺服器。

同步與否，帶入的參數是布林值，true代表非同步，false代表同步。

此時readyState為1，代表已經使用了open，但尚未傳送資料。

ex：

xhr.open('get', 'http://xxx.xxx.xx', true);

readyState為4

shr.send(null);

因為在這裡不傳送資料，因此小括弧中填null，代表空值。

此時可以從responseText中看到資料，只要用DOM元素的方式處理即可，若資料格式是字串，再用JSON.parse處理轉成JSON格式。

這時readyState`會顯示為4，代表已撈取到資料，且數據已完全接收。

readyState為其他數字

當readyState為2時，代表偵測到有用send。

readyState為3時，則代表正在加載資料中（Loading）。

XMLHttpRequst()的第三個參數——同步與非同步

照前述程式碼操作後，執行下列程式碼會回傳空行：

console.log(xhr.responseText);

這是因為在XMLHttpRequst()中的第三個參數中，true代表的是非同步。

所以，不會等資料傳回來，程式碼就向下執行，等到資料回傳後才會自動回傳，

而在執行console.log()時資料尚未回傳回來，所以會撈取不到任何資料。

那如果選擇參數帶入false呢？

在XMLHttpRequst()中的第三個參數中，false是同步的意思。

在此時執行console.log()就可以撈取到資料，因為在這個情況下，程式會等資料傳回來後，才會繼續向下執行程式碼。

兩種用法各有優缺，使用非同步的原因是因為有時資料太大，不可能等資料撈完後材繼續執行——因為這樣會等很久，因此用非同步，可以節省載入時間。